/**
*
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>版本管理</el-breadcrumb-item>
    </el-breadcrumb>
    <NoPermission
      v-if="!authFilter(permissionObj, 'index')">
    </NoPermission>

    <div v-else>
      <!-- 搜索筛选 -->
      <el-form :inline="true" :model="formInline" class="mgt16">
        <el-form-item label="" prop="designName" label="搜索：">
          <el-select size="small" v-model="formInline.designName" placeholder="设计公司" clearable
                     filterable>
            <el-option v-for="type in designNameList" :label="type.label" :value="type.label" :key="type.type"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="" prop="createTime">-->
<!--          <el-date-picker-->
<!--            clearable-->
<!--            size="small"-->
<!--            v-model="formInline.createTime"-->
<!--            type="daterange"-->
<!--            range-separator="-"-->
<!--            start-placeholder="开始时间"-->
<!--            end-placeholder="结束时间"-->
<!--            format="yyyy-MM-dd"-->
<!--            :default-time="['00:00:00', '23:59:59']"-->
<!--            value-format="timestamp">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button size="small" type="primary" icon="el-icon-plus"
                     @click="handleEdit(true, {})"
                     v-if="authFilter(permissionObj, 'add')">添加最新版本</el-button>
          <el-button
            size="small"
            type="primary"
            @click="routerPush('/feedback/labelSetting?fromPage=versionManagement&labelTitle=版本管理&labelPath=/version/versionManagement')"
            v-if="authFilter(permissionObj, 'label')">
            标签设置
          </el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <div class="relative">
        <table-top
          :showCheck="authFilter(permissionObj, 'excelExportCheck')"
          :showResult="authFilter(permissionObj, 'excelExportResult')"
          :refCustom="refCustom"
          :sheetLast="sheetLast"
          :formInline="formInline"
          :exportExcelInfo="exportExcelInfo"
          :exportExcelArray="exportExcelArray"
          :exportExcelHead="exportExcelHead"
          :multipleSelection="multipleSelection"
          :exportExcelRequest="exportExcelRequest"
          :showSummary="showSummary"
          :summaryList="summaryList"
          :isSubtotal="isSubtotal"
          :mergeCells="mergeCells"
          :mergeName="mergeName"
          :showRedList="showRedList"
          :customColor="customColor"
          @onSuccess="onSuccess">
        </table-top>
        <div class="relative">
          <el-table
            :header-cell-style="{'font-weight': '600', 'color':'#333'}"
            size="small"
            :data="listData"
            highlight-current-row
            v-loading="loading"
            :height="tableHeight"
            :row-height="rowHeight"
            use-virtual
            border
            element-loading-text="拼命加载中"
            style="width: 100%;"
            :show-summary="showSummary"
            :summary-method="getSummaries"
            :span-method="objectSpanMethod"
            ref="multipleTable"
            @selection-change="handleSelectionChange">
            <el-table-column
              prop="selection"
              align="center"
              type="selection"
              width="60">
            </el-table-column>
            <el-table-column align="center" prop="version" label="版本号" min-width="120px">
            </el-table-column>
            <el-table-column align="center" prop="versionName" label="版本名称" min-width="120px">
            </el-table-column>
            <el-table-column align="center" prop="fileName" label="文件名" min-width="140px">
            </el-table-column>
            <el-table-column align="center" prop="designName" label="设计公司" min-width="100px">
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间" width="140px">
              <template slot-scope="scope">
                <div>{{scope.row.createTime|timestampToDay}}</div>
              </template>
            </el-table-column>
<!--            <el-table-column align="center" prop="content" label="升级文本" min-width="80px">-->
<!--              <template slot-scope="scope">-->
<!--                <div-->
<!--                  class="curPer"-->
<!--                  :class="scope.row.content ? 'color66b' : ''"-->
<!--                  @click="openContent(scope.row)"-->
<!--                  v-if="authFilter(permissionObj, 'detail')">-->
<!--                  {{scope.row.content ? '详情' : '编辑'}}-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column
              align="center"
              label="操作"
              :min-width="operaWidth"
              fixed="right">
              <template slot-scope="scope"
                        v-if="listData&&listData.length>0">
                <el-button size="mini" type="primary"
                           @click="handleEdit(false, scope.row)"
                           v-if="authFilter(permissionObj, 'update')">
                  编辑
                </el-button>
                <el-button size="mini" type="danger"
                           @click="deleteColumn(scope.$index, scope.row)"
                           v-if="authFilter(permissionObj, 'delete')">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>
      <!-- 分页组件 -->
      <Pagination v-bind:child-msg="pageparm" :pageSizes="[20,30,50]" @callFather="callFather"></Pagination>
    </div>

    <!-- 编辑弹框界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="70%" @close="closeDialog('edit', 'editForm')"
               style="margin-left: 200px;">
      <el-form label-width="120px" class="edit-class" :model="editForm" :rules="rules" ref="editForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="版本号" prop="version">
              <el-input size="small" v-model="editForm.version" auto-complete="off" placeholder="版本号(参考格式:101)"
                type="number" clearable></el-input>
            </el-form-item>
            <el-form-item label="设计公司" prop="designName">
              <el-select size="small" v-model="editForm.designName" placeholder="设计公司" clearable
                         filterable>
                <el-option v-for="type in designNameList" :label="type.label" :value="type.value" :key="type.type"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="升级文本语言" prop="languageContent">
              <el-select size="small"
                         multiple
                         v-model="editForm.languageContent"
                         placeholder="请选择升级文本语言"
                         clearable
                         filterable
                         @change="languageContentChange">
                <el-option v-for="type in languageList" :label="type.label" :value="type.value" :key="type.type"></el-option>
              </el-select>
            </el-form-item>
            <!--语言标签-->
            <el-form-item label="" prop=""
                          v-if="dynamicTags&&dynamicTags.length>0">
              <el-tag
                :key="tag.value"
                v-for="tag in dynamicTags"
                :type="languageCurrent == tag.value ? 'danger' : 'info'"
                effect="plain"
                :closable="dynamicTags.length>1"
                :disable-transitions="false"
                @close="handleClose(tag)"
                @click="clickTag(tag)">
                {{tag.value}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本名称" prop="versionName">
              <el-input size="small" v-model="editForm.versionName" auto-complete="off" placeholder="请输入版本名称"
                        clearable></el-input>
            </el-form-item>
<!--            <el-form-item label="创建时间" prop="createTime">-->
<!--              <el-date-picker-->
<!--                size="small"-->
<!--                v-model="editForm.createTime"-->
<!--                type="date"-->
<!--                placeholder="选择创建时间"-->
<!--                format="yyyy-MM-dd"-->
<!--                value-format="timestamp">-->
<!--              </el-date-picker>-->
<!--            </el-form-item>-->
            <el-form-item label="上传升级包" prop="file">
              <template slot-scope="scope">
                <Upload
                  v-if="showUpload&&editFormVisible"
                  :autoUpload="false"
                  uploadRequest="api/version/versionmanagementdetailUploadZip"
                  :uploadParams="editForm"
                  @handleSuccess="handleSuccess"
                  fileDir="fileDir"
                  :showTips="false"
                  accept=".zip,.rar"
                  uploadTitle="选择文件"
                  :fileListNew="editForm.fileList"
                  :limit="1"
                  :maxSize="100"
                  :submitUploadCheck="editForm.version"
                  @getUrlList="getUrlList"
                  @showUploadGet="showUploadGet">
                </Upload>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="升级文本"
          prop="languageContentCurrent"
          v-if="showContent">
          <custom-quill-editor
            v-if="editFormVisible&&showContent"
            :content="editForm.languageContentCurrent"
            @onEditorChange="onEditorChange">
          </custom-quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('edit', 'editForm')">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>

    <!--  升级文本  -->
    <el-dialog title="升级文本" :visible.sync="editContentVisible" width="70%" @close="closeDialog('editContent', 'editContent')"
               style="margin-left: 200px;">
      <el-form label-width="80px" class="edit-class" :model="editContent" :rules="rules" ref="editContent"
               label-position="top">
        <el-form-item label="" prop="content">
          <custom-quill-editor
            v-if="editContentVisible"
            :content="editContent.content"
            @onEditorChange="onEditorChangeContent">
          </custom-quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('editContent', 'editContent')">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitFormContent('editContent')">保存</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import Pagination from '../../components/Pagination'
// 输入建议
import AutoCompleteCustom from "@/components/AutoCompleteCustom.vue"
import TableTop from "@/components/table-top.vue"
import {mapGetters} from "vuex";
//上传excel
import UploadFile from "@/components/UploadFile.vue"
// 选择部门
import config from "@/api/config.js";
import * as dd from 'dingtalk-jsapi' // 此方式为整体加载，也可按需进行加载

import reportMin from "@/views/tatisticalReport/tatisticalReport.js"
import router from "../../router";
import CustomQuillEditor from "@/components/custom-quill-editor.vue"
//上传升级包
import Upload from "@/components/Upload.vue"
export default {
  // 注册组件
  components: {
    Pagination,
    AutoCompleteCustom,
    TableTop,
    UploadFile,
    CustomQuillEditor,
    Upload,
  },
  mixins:[reportMin],
  data() {
    return {
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      editContentVisible: false, //控制升级文本辑页面显示与隐藏
      title: '',
      isAdd: false,
      editForm: {
        id: '',
        version: '',
        versionName: '',
        designName: '',
        // createTime: '',
        content: '',
        fileList: [],
        file: '',
        fileName: '',
        //发布说明语言选择
        languageContent: '',
        languageContentCurrent: '',
        languageCurrent: '',
      },
      editContent: {
        id: '',
        content: '',
      },
      // rules表单验证
      rules: {
        version: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
        versionName: [{ required: true, message: '请输入版本名称', trigger: 'blur' }],
        designName: [{ required: true, message: '请输入设计公司', trigger: 'blur' }],
        // createTime: [{ required: true, message: '请选中创建时间', trigger: 'change' }],
        content: [{ required: true, message: '请输入升级说明', trigger: 'blur' }],
        file: [{ required: true, message: '请上传升级包', trigger: 'change' }],
        languageContent: [{ required: true, message: '请选择升级文本语言', trigger: 'change' }],
        languageContentCurrent: [{ required: true, message: '请输入升级文本', trigger: 'blur' }],
      },
      formInline: {
        page: 1,
        pagenum: 20,
        version: '',
        versionName: '',
        designName: '',
      },
      designNameList: [
        {
          value: 'teclast',
          label: 'teclast',
        },
        {
          value: 'incar',
          label: 'incar',
        }
      ],
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 20,
        total: 20
      },
      // 虚拟列表 start
      rowHeight: 40,
      tableHeight: window.innerHeight - 302,// 表的高度
      // 虚拟列表 end
      // 导出表格start
      // 是否合并小格
      mergeCells: false,
      //合并表格名称
      mergeName: 'id',
      // 导出自定义字体颜色所属字段
      showRedList: ['是'],
      // 导出自定义字体颜色
      customColor: 'D63640',
      // 是否小计
      isSubtotal: false,
      // 是否显示统计
      showSummary: false,
      // 统计字段列表
      summaryList: ['balance'],
      // 表格列最后一列，有边框样式，手动去掉
      sheetLast: '',
      // 导出数据接口
      exportExcelRequest:'versionManagementList',
      //导出表格字段及formatter信息
      exportExcelArray: [
        {
          prop: 'version',
          label: '版本号',
          formatterFlag: false,
          align: 'center',
        },
        {
          prop: 'versionName',
          label: '版本名称',
          formatterFlag: false,
          align: 'center',
        },
        {
          prop: 'fileName',
          label: '文件名',
          formatterFlag: false,
          align: 'center',
        },
        {
          prop: 'designName',
          label: '设计公司',
          formatterFlag: false
        },
        {
          prop: 'createTime',
          label: '创建时间',
          formatterFlag: true,
          formatterType: 'time-type',
        },
        {
          prop: 'content',
          label: '升级文本',
          formatterFlag: false
        },
      ],
      // 导出excel表格宽高列表
      exportExcelHead:[
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 380, wch: 20 },
      ],
      //导出excel表格id及excel名称
      exportExcelInfo: {
        excelId: 'Lend',
        excelName: '版本管理列表记录.xlsx'
      },
      //需要导出的table的选择数据
      multipleSelection: [],
      refCustom: 'myChild',
      //升级包
      showUpload: true,
      //多语言
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      againClick: true,
      showContent: false,
      languageCurrent: '',
      languageList: [],

    }
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getData(this.formInline)
  },
  computed:{
    ...mapGetters(['userAuthList']),
    permissionObj(){
      if(this.userAuthList&&this.userAuthList.length>0){
        return this.authListFilter(this.userAuthList,'customManagement', 'versionManagement')
      }
    },
    // 操作列表宽度
    operaWidth(){
      let vm = this
      const minWidth = 120
      const len = vm.authFilterLen(this.permissionObj,  'update', 'delete').length
      return len > 0 ? vm.multiply(len,80) : minWidth
    }
  },
  // 虚拟列表 start
  mounted() {
    /** 控制table的高度 */
    const vm = this
    // resize窗口节流
    window.addEventListener("resize", vm.throttleNew(vm.updateTableHeight, 300))
  },
  // vue设置列表高度自适应和show-summary的冲突
  updated() {
    const vm = this
    if(vm.showSummary){
      vm.$nextTick(()=>{
        vm.$refs['multipleTable'].doLayout()
      })
    }
  },
  beforeDestroy() {
    const vm = this
    window.removeEventListener('resize', vm.updateTableHeight)
  },
  // 虚拟列表 end

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 虚拟列表 start
    /**
     * 虚拟列表 更新表高
     */
    updateTableHeight() {
      const vm = this
      // console.log('vm.tableHeight', vm.tableHeight)
      const offsetHei = document.documentElement.clientHeight
      // const removeHeight = this.filterObj.length > 0 ? 285 : 254
      const removeHeight = 254
      vm.tableHeight = offsetHei - removeHeight
    },
    // 虚拟列表 end
    // 带输入建议
    handleSelect(item) {
      this.formInline.dept = item.value
    },
    // 获取列表
    getData(parameter) {
      let vm = this
      vm.loading = true

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      vm.apiUrl[vm.exportExcelRequest](parameter,"POST")
        .then(res => {
          vm.loading = false
          const { data:{list=[],totalnum},code, msg } = res
          if (code != 0) {
            vm.showMessageMin({
              message: msg,
              type: 'error',
            })
          } else {
            // 合并小格
            vm.listData = vm.groupBy(list, vm.mergeName)
            // console.log('vm.listData', vm.listData)
            // 分页赋值
            vm.pageparm.currentPage = vm.formInline.page
            vm.pageparm.pageSize = vm.formInline.pagenum
            vm.pageparm.total = totalnum
          }
        })
        .catch(err => {
          if(err&&err.isCancel) return
          vm.loading = false
        })
    },
    // 分页插件事件
    callFather(parm) {
      const vm = this
      vm.formInline = {
        ...vm.formInline,
        page: parm.currentPage,
        pagenum: parm.pageSize
      }
      vm.getData(vm.formInline)
      vm.scrollTopRef('multipleTable')
    },
    // 搜索事件
    search() {
      const vm = this
      vm.formInline = {
        ...vm.formInline,
        page: 1
      }
      vm.getData(vm.formInline)
    },
    // 关闭编辑、增加弹出框
    clearValidate(formName){
      if(!this.$refs[formName]) return
      this.$refs[formName].clearValidate()
    },
    resetForm(formName) {
      const vm = this
      if(!vm.$refs[formName]) return
      vm.$refs[formName].resetFields();
    },
    closeDialog(dialog, formName) {
      let vm = this
      if (dialog == 'edit') {
        vm.editFormVisible = false
      }else if (dialog == 'editContent') {
        vm.editContentVisible = false
      }
      this.clearValidate(formName);
    },
    //显示编辑界面
    async handleEdit(isAdd, row) {
      let vm = this
      console.log(isAdd, row)
      vm.languageContentList(row.id).then((list)=> {
        vm.isAdd = isAdd;
        vm.title = vm.isAdd ? '添加版本' : '修改版本';
        if (!vm.isAdd) {
          // vm.editForm = {
          //   ...row,
          //   createTime: new Date().getTime(),
          // }
          vm.editForm = {
            ...row,
            name: row.fileName,
            url: row.file
          }
          const obj = {
            name: row.fileName,
            url: row.file
          }
          vm.editForm.fileList = []
          vm.editForm.fileList.push(obj)
        } else {
          vm.editForm = {}
          vm.editForm = {
            content: '',
            fileList: []
          }
          vm.$nextTick(() => {
            vm.clearValidate('editForm')
          })
        }

        // 多语言
        vm.editForm = {
          ...vm.editForm,
          // languageContent: row&&row.language ? [row.language] : [this.$store.state.language],
          languageContent: row && row.languageContent && row.languageContent.length > 0 ?
            row.languageContent : [this.$store.state.language],
        }
        vm.languageCurrent = row && row.languageCurrent ? row.languageCurrent : this.$store.state.language
        vm.showContent = true
        const arr = vm.editForm.languageContent
        vm.dynamicTags = vm.languageList.filter((item) => {
          if (arr.includes(item.value)) {
            item.pid = row.id
            if (vm.languageCurrent == item.value) {
              vm.languageContentCurrentSet(item.content);
            }
            return {
              ...item,
            }
          }
        })

        vm.editFormVisible = true
      })
    },
    // 显示编辑界面保存方法
    submitForm(editData) {
      let vm = this
      vm.$refs[editData].validate(valid => {
        if (valid) {
          let request = null
          // 多语言
          vm.editForm = {
            ...vm.editForm,
            languageContentList: vm.dynamicTags,
            languageCurrent: vm.languageCurrent,
          }
          if(vm.isAdd){
            request = vm.apiUrl.versionmanagementAdd(vm.editForm,"POST")
          }else {
            request = vm.apiUrl.versionmanagementEdit(vm.editForm,"POST")
          }
          vm.openFullScreen()
          request.then(res => {
            vm.closeFullScreen(vm.openFullScreen());
            const { code, msg } = res
            if (code != 0) {
              vm.showMessageMin({
                message: msg,
                type: 'error',
              })
            } else {
              vm.editFormVisible = false
              vm.showMessageMin({
                message: vm.title+'成功！',
                type: 'success',
              })
              vm.getData(vm.formInline)
            }
          })
            .catch(err => {
              if(err&&err.isCancel) return
              vm.editFormVisible = false
              vm.closeFullScreen(vm.openFullScreen());
              vm.showMessageMin({
                message: vm.title+'失败，请稍后再试！',
                type: 'error',
              })
            })
        } else {
          return false
        }
      })
    },
    // 删除
    deleteColumn(index, row) {
      let vm = this
      vm.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          vm.openFullScreen()
          const param = {
            id: row.id
          }
          vm.apiUrl.versionmanagementDelete(param,"POST")
            .then(res => {
              vm.closeFullScreen(vm.openFullScreen());
              const { code, msg } = res;
              if (code == 0) {
                vm.showMessageMin({
                  message: '已删除!',
                  type: 'success',
                })
                vm.getData(vm.formInline)
              } else {
                vm.showMessageMin({
                  message: msg,
                  type: 'error',
                })
              }
            })
        })
        .catch(() => {
          vm.showMessageMin({
            message: '已取消删除',
            type: 'info',
          })
        })
    },

    //导出excel
    // 上传excel成功
    async onSuccess(data) {
      // console.log(data);
      let vm = this
      // 数据库的key为英文，我们上传的key为中文，需要一一转化
      const userRelations = Object.fromEntries(vm.exportExcelArray.map((item)=>{
        return [item.label,item.prop]
      }))
      console.log('obj', obj)
      // 将key值一一对应
      const newArr = data.results.map((item) => {
        let userInfo = {};
        Object.keys(item).forEach((key) => {
          if(userRelations[key]){
            userInfo[userRelations[key]] = item[key];
          }
          // userInfo[userRelations[key]] = item[key];
        });
        return userInfo;
      });

      // const newArr = data.results

      console.log(newArr);
      const param = {
        excelFrom: 'BillingPlan',
        excelList: newArr,
      }
      //   await importEmployee(param); // 调用上传接口
      vm.showMessageMin({
        message: '上传文件成功',
        type: 'success',
      })
      vm.isShow = false;
    },
    //显示编辑(批量编辑)编辑界面
    onEditorChange(e){
      const vm = this
      vm.editForm = {
        ...vm.editForm,
        // 多语言
        languageContentCurrent: ''
      }

      if(vm.dynamicTags&&vm.dynamicTags.length>0){
        vm.dynamicTags = vm.dynamicTags.map((item)=>{
          if(item.value == vm.languageCurrent){
            item.content = e.content
            vm.languageContentCurrentSet(e.content,false);
          }
          return {
            ...item,
          }
        })
      }
    },
    openContent(row){
      const vm = this
      vm.editContent = {
        id: row.id,
        content: row.content
      }
      vm.editContentVisible = true
    },
    //显示编辑(批量编辑)编辑界面
    onEditorChangeContent(e){
      const vm = this
      vm.editContent.content = e.content
    },
    // 显示升级文本编辑界面保存方法
    submitFormContent(editData) {
      let vm = this
      vm.$refs[editData].validate(valid => {
        if (valid) {
          let request = vm.apiUrl.versionmanagementContent(vm.editContent,"POST")
          vm.openFullScreen()
          request.then(res => {
            vm.closeFullScreen(vm.openFullScreen());
            const { code, msg } = res
            if (code != 0) {
              vm.showMessageMin({
                message: msg,
                type: 'error',
              })
            } else {
              vm.editContentVisible = false
              vm.showMessageMin({
                message: '编辑升级文本成功！',
                type: 'success',
              })
              vm.getData(vm.formInline)
            }
          })
            .catch(err => {
              if(err&&err.isCancel) return
              vm.editContentVisible = false
              vm.closeFullScreen(vm.openFullScreen());
              vm.showMessageMin({
                message: vm.title+'失败，请稍后再试！',
                type: 'error',
              })
            })
        } else {
          return false
        }
      })
    },
    // 上传升级包
    showUploadGet(showUpload){
      const vm = this
      vm.showUpload = false
      vm.$nextTick(()=>{
        vm.showUpload = true
      })
    },
    // 上传文件
    getUrlList(arr){
      console.log(arr)
      const vm = this
      const obj = arr[0] || {}
      if(obj){
        vm.editForm = {
          ...vm.editForm,
          file: obj.f_url,
          fileName: obj.file_name
        }
        // vm.editForm.file = obj.f_url
        // vm.editForm.fileName = obj.file_name
      }
      vm.editForm = {
        ...vm.editForm,
        fileList: arr || []
      }
      // vm.editForm.fileList = arr || [];
      this.clearValidate('editForm');
      vm.showUploadGet();
    },
    handleSuccess(){
      const vm = this
      vm.getData(vm.formInline)
    },
    // 多语言
    // 语言标签
    handleClose(tag) {
      const vm = this
      vm.showContent = false
      this.dynamicTags = this.dynamicTags.filter((item)=>{
        if(item.value != tag.value){
          return {
            ...item
          }
        }
      });
      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag.value), 1);
      const  arr = this.dynamicTags.map(item=>{
        return item.value
      })
      vm.editForm = {
        ...vm.editForm,
        languageContent: arr
      }
      vm.showContent = true
      if(this.dynamicTags&&this.dynamicTags.length==1 || vm.languageCurrent == tag.value){
        vm.languageCurrent = this.dynamicTags[0].value
        vm.clickTag(this.dynamicTags[0],true)
      }
    },
    clickTag(tag,isClose=false) {
      const vm = this
      if(!vm.againClick) return
      if(vm.languageCurrent == tag.value && !isClose){
        return;
      }
      vm.againClick = false
      vm.showContent = false
      // console.log('vm.dynamicTags', vm.dynamicTags)
      vm.dynamicTags = vm.dynamicTags.map(item=>{
        if(tag.value == item.value || (isClose&&vm.languageCurrent==item.value)){
          vm.languageCurrent = item.value
          vm.languageContentCurrentSet(item.content,false);
        }
        return {
          ...item,
        }
      })
      vm.$nextTick(()=>{
        vm.againClick = true
        vm.showContent = true
      })
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      const vm = this
      let inputValue = this.inputValue;
      if (inputValue) {
        const obj = vm.languageList.filter(item=>[inputValue].includes(item.value))
        this.dynamicTags.push(obj);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    languageContentChange(e){
      const vm = this
      return new Promise((resolve) => {
        let list = []
        if (e) {
          list = vm.languageList.filter((item) => {
            if(vm.editForm.languageContent.includes(item.value)){
              return {
                ...item,
              }
            }
          })
        }

        if (list && list.length > 0) {
          vm.dynamicTags = list
          if(list&&list.length==1 || !e.includes(vm.languageCurrent)){
            vm.languageCurrent = e[0]
            vm.languageContentCurrentSet(list[0].content);
          }
        }else {
          vm.dynamicTags = []
          vm.languageContentCurrentSet('');
        }
        resolve(list)
      })
    },
    languageContentCurrentSet(o='',isAgain=true){
      const vm = this
      if(isAgain){
        vm.showContent = false
      }
      vm.editForm = {
        ...vm.editForm,
        languageContentCurrent: o
      }
      if(isAgain){
        vm.$nextTick(()=>{
          vm.showContent = true
        })
      }
    },
    languageContentList(pid){
      const vm = this
      const param = {
        pid: pid ? pid : 0
      }
      vm.openFullScreen()
      return new Promise((resolve) => {
        vm.apiUrl.languageContentList(param,"POST")
          .then(res => {
            vm.closeFullScreen(vm.openFullScreen());
            const { data:{list=[]},code, msg } = res
            if (code != 0) {
              vm.showMessageMin({
                message: msg,
                type: 'error',
              })
            } else {
              //语言列表
              vm.languageList = list;
              if(vm.exportExcelArray && vm.exportExcelArray.length > 0){
                vm.exportExcelArray = vm.exportExcelArray.map(item=>{
                  if(item.prop == 'language'){
                    item.formatterInfo = vm.languageList
                  }
                  return {
                    ...item
                  }
                })
              }
              resolve(list)
            }
          })
      })
    },

  }
}
</script>

<style lang="less" scoped>
// 内容主体高度
/deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow{
  min-height: 250px;
}
/deep/ .ql-snow .ql-color-picker .ql-picker-label, .ql-snow .ql-icon-picker .ql-picker-label{
  display: flex;
  align-items: center;
}
/deep/ .ql-snow .ql-picker{
  height: 100%;
}
// 语言标签
.el-tag + .el-tag {
  margin-left: 10px;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
